<!-- 对 漂浮 组件的编辑 -->
<template>
  <div class="fixed-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="service-edit">
        <div v-loading="loading">
          <div v-if="data">
            <el-row style="margin-top:10px;">
              <!-- <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="组件状态" style="margin-bottom:0px;">
                    <el-radio-group v-model="component.componentSimple.status">
                      <el-radio :label="0">开启</el-radio>
                      <el-radio :label="4">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col> -->
              <el-col :span="12" v-if="data && data.ptn">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="显示位置" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.ptn">
                      <el-radio :label="2">左边</el-radio>
                      <el-radio :label="1">右边</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="'100px'">
                  <el-form-item label="手机端显示" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.telShow">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-divider content-position="left">内容数据</el-divider>
            <div v-if="data && data.dataList">
              <el-collapse v-model="activeName">
                <el-collapse-item v-for="(item , index) in data.order" :key="index" :name="index">
                  <template slot="title">
                    <div class="noselect" style="padding: 0 12px;">
                      <span @click.stop='orderUp(index)'><i
                          :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true , 'displayNo': index === 0}"></i>
                      </span>
                      <span @click.stop='orderDown(index)'>
                        <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo': index === (data.order.length - 1)}"
                          @click.stop='orderDown(index)'></i>
                      </span>
                      <span :class="{'customer-title': true, 'active':activeName === index}"
                        v-text="showTitle(item)"></span>
                    </div>
                  </template>
                  <div v-if="item === 'qq'">
                    <DataListQQ :itemList="data.dataList.qq" :add="()=>{data.dataList.qq.push({name:'', value:''});}"
                      :del="(index)=>{data.dataList.qq.splice(index, 1);}" ref="dataQQ" />
                  </div>
                  <div v-else-if="item === 'email'">
                    <DataListEmail :itemList="data.dataList.email"
                      :add="()=>{data.dataList.email.push({name:'', value:''});}"
                      :del="(index)=>{data.dataList.email.splice(index, 1);}" ref="dataEmail" />
                  </div>
                  <div v-else-if="item === 'calles'">
                    <DataListCalles :itemList="data.dataList.calles" :add="()=>{data.dataList.calles.push({value:''});}"
                      :del="(index)=>{data.dataList.calles.splice(index, 1);}" ref="dataCalles" />
                  </div>
                  <div v-else-if="item === 'wangs'">
                    <DataListWangs :itemList="data.dataList.wangs" :add="()=>{data.dataList.wangs.push({value:''});}"
                      :del="(index)=>{data.dataList.wangs.splice(index, 1);}" ref="dataWangs" />
                  </div>
                  <div v-else-if="item === 'skypes'">
                    <DataListSkypes :itemList="data.dataList.skypes" :add="()=>{data.dataList.skypes.push({value:''});}"
                      :del="(index)=>{data.dataList.skypes.splice(index, 1);}" ref="dataSkypes" />
                  </div>
                  <div v-else-if="item === 'msn'">
                    <DataListMSN :itemList="data.dataList.msn" :add="()=>{data.dataList.msn.push({name:'', value:''});}"
                      :del="(index)=>{data.dataList.msn.splice(index, 1);}" ref="dataMSN" />
                  </div>
                  <div v-else-if="item === 'whatsapps'">
                    <DataListWhatsapps :itemList="data.dataList.whatsapps"
                      :add="()=>{data.dataList.whatsapps.push({value:''});}"
                      :del="(index)=>{data.dataList.whatsapps.splice(index, 1);}" ref="dataWhatsapps" />
                  </div>
                  <div v-else-if="item === 'qrcode'">
                    <DataListQRCode :itemList="data.dataList.qrcode" :addQRCode="addQRCode" :delQRCode="delQRCode" />
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import DataListQQ from '@/components/common/design/dialog/component/fixed/DataListQQ.vue'
import DataListEmail from '@/components/common/design/dialog/component/fixed/DataListEmail.vue'
import DataListCalles from '@/components/common/design/dialog/component/fixed/DataListCalles.vue'
import DataListWangs from '@/components/common/design/dialog/component/fixed/DataListWangs.vue'
import DataListSkypes from '@/components/common/design/dialog/component/fixed/DataListSkypes.vue'
import DataListMSN from '@/components/common/design/dialog/component/fixed/DataListMSN.vue'
import DataListWhatsapps from '@/components/common/design/dialog/component/fixed/DataListWhatsapps.vue'
import DataListQRCode from '@/components/common/design/dialog/component/fixed/DataListQRCode.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import * as functions from '@/core/functions.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTFIXED, () => {
      this.close()
      this.dialogShow = true

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
      this.bjComponent = BackendjsFunctions.getComponentFixedData()
      this.data = this.bjComponent.render.data
      this.qrcodesRepertory = this.bjComponent._other.qrcodes
      this.loading = false
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      name: '漂浮组件编辑',
      bjComponent: null,
      data: null,
      loading: true,
      activeName: [-1],
      qrcodesRepertory: [],
      bool: true
    }
  },
  watch: {
  },
  methods: {
    showTitle (item) {
      switch (item) {
        case 'qq':
          return 'QQ'
        case 'email':
          return 'E-mail'
        case 'calles':
          return '电话'
        case 'wangs':
          return '旺旺'
        case 'skypes':
          return 'SKYPE'
        case 'msn':
          return 'MSN'
        case 'whatsapps':
          return 'WhatsApp'
        case 'qrcode':
          return '二维码'
        default:
          return 'Undefined'
      }
    },
    orderUp (index) {
      if (index === 0) {
        return
      }
      let order = this.data.order
      let temp = order[index - 1]
      order[index - 1] = order[index]
      order[index] = temp
      this.data.order = JSON.parse(JSON.stringify(order))
      if (this.activeName === index) {
        this.activeName = index - 1
      } else if (this.activeName === (index - 1)) {
        this.activeName = index
      }
    },
    orderDown (index) {
      if (index === (this.data.order.length - 1)) {
        return
      }
      let order = this.data.order
      let temp = order[index + 1]
      order[index + 1] = order[index]
      order[index] = temp
      this.data.order = JSON.parse(JSON.stringify(order))
      if (this.activeName === index) {
        this.activeName = index + 1
      } else if (this.activeName === index + 1) {
        this.activeName = index
      }
    },
    addQRCode (repertory) {
      this.qrcodesRepertory.push({ hrepertory: repertory })
      let src = functions.getRepertoryImageSrcByHostRepertory(repertory)
      if (!this.data.dataList.qrcode) {
        this.data.dataList.qrcode = []
      }
      this.data.dataList.qrcode.push({ value: src })
    },
    delQRCode (index) {
      this.qrcodesRepertory.splice(index, 1)
      this.data.dataList.qrcode.splice(index, 1)
    },
    // .............
    dataEmptyDel (list) {
      if (this.data && this.data.dataList) {
        if (this.data.dataList.qq) {
          let listData = []
          for (let i in this.data.dataList.qq) {
            if (this.data.dataList.qq[i].name && this.data.dataList.qq[i].value) {
              listData.push(this.data.dataList.qq[i])
            }
          }
          this.data.dataList.qq = listData
        }
        if (this.data.dataList.email) {
          let listData = []
          for (let i in this.data.dataList.email) {
            if (this.data.dataList.email[i].name && this.data.dataList.email[i].value) {
              listData.push(this.data.dataList.email[i])
            }
          }
          this.data.dataList.email = listData
        }
        if (this.data.dataList.calles) {
          let listData = []
          for (let i in this.data.dataList.calles) {
            if (this.data.dataList.calles[i].value) {
              listData.push(this.data.dataList.calles[i])
            }
          }
          this.data.dataList.calles = listData
        }
        if (this.data.dataList.wangs) {
          let listData = []
          for (let i in this.data.dataList.wangs) {
            if (this.data.dataList.wangs[i].value) {
              listData.push(this.data.dataList.wangs[i])
            }
          }
          this.data.dataList.wangs = listData
        }
        if (this.data.dataList.skypes) {
          let listData = []
          for (let i in this.data.dataList.skypes) {
            if (this.data.dataList.skypes[i].value) {
              listData.push(this.data.dataList.skypes[i])
            }
          }
          this.data.dataList.skypes = listData
        }
        if (this.data.dataList.msn) {
          let listData = []
          for (let i in this.data.dataList.msn) {
            if (this.data.dataList.msn[i].name && this.data.dataList.msn[i].value) {
              listData.push(this.data.dataList.msn[i])
            }
          }
          this.data.dataList.msn = listData
        }
        if (this.data.dataList.whatsapps) {
          let listData = []
          for (let i in this.data.dataList.whatsapps) {
            if (this.data.dataList.whatsapps[i].value) {
              listData.push(this.data.dataList.whatsapps[i])
            }
          }
          this.data.dataList.whatsapps = listData
        }
      }
    },
    close () {
      this.dataEmptyDel()
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
      this.loading = true
      this.activeName = [-1]
      this.qrcodesRepertory = []
    },
    saveclose () {
      this.boolQQ = this.$refs['dataQQ'][0].validateF()
      if (!this.boolQQ) {
        this.activeName.push(0)
        return
      }
      this.boolEmail = this.$refs['dataEmail'][0].validateF()
      if (!this.boolEmail) {
        this.activeName.push(1)
        return
      }
      this.boolCalles = this.$refs['dataCalles'][0].validateF()
      if (!this.boolCalles) {
        this.activeName.push(2)
        return
      }
      this.boolWangs = this.$refs['dataWangs'][0].validateF()
      if (!this.boolWangs) {
        this.activeName.push(3)
        return
      }
      this.boolSkypes = this.$refs['dataSkypes'][0].validateF()
      if (!this.boolSkypes) {
        this.activeName.push(4)
        return
      }
      this.boolMSN = this.$refs['dataMSN'][0].validateF()
      if (!this.boolMSN) {
        this.activeName.push(5)
        return
      }
      this.boolWhatsapps = this.$refs['dataWhatsapps'][0].validateF()
      if (!this.boolWhatsapps) {
        this.activeName.push(6)
        return
      }
      this.bjComponent.render.data = _.cloneDeep(this.data)
      this.bjComponent._other.qrcodes = _.cloneDeep(this.qrcodesRepertory)
      BackendjsFunctions.saveComponentFixedData(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    DataListQQ,
    DataListEmail,
    DataListCalles,
    DataListWangs,
    DataListSkypes,
    DataListMSN,
    DataListWhatsapps,
    DataListQRCode
  }
}
</script>

<style scoped>
.service-edit {
  min-height: 530px;
  min-height: calc(100vh - 200px);
  width: 640px;
}
.service-edit /deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
.fixed-edit .customer-title {
  font-size: 16px;
  margin-left: 24px;
}
.fixed-edit .icon {
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  height: 100%;
  display: inline-block;
}
.fixed-edit .icon:hover {
  color: #409eff;
}
.fixed-edit .displayNo {
  color: #888888;
  cursor: not-allowed;
  opacity: 0.5;
}
.fixed-edit .active {
  color: #409eff;
}
</style>
